// 轮播！！！！！！
var rotation = document.querySelector('.rotation')
var rot_left = document.querySelector('.rot_left')
var rot_right = document.querySelector('.rot_right')
var rot_ul = document.querySelector('.rot_ul')
var rot_li = rot_ul.querySelectorAll('li')
// 轮播时字的动画
var rot_top = rotation.querySelector('.rot_top')
var rot_bottom = rotation.querySelector('.rot_bottom')
// 轮播时字的动画
img = [
    'url(../image/lunbo0.jpg)',
    'url(../image/lunbo1.jpg)',
    'url(../image/lunbo2.jpg)',
]
var i = 0
// 全局变量 i 用来写图片的索引
changeWord()
// 添加文字的动画
var time
//在函数里边声明的所有变量都是局部变量
start()
// 调用轮播函数
function start() {
    time = setInterval(function () {
        startPoint()
        i = i + 1
        if (i > 2) {
            i = 0
        }
        changeImg()

        changeWord()
        lastPoint()
    }, 2000)
}
// 点击左边
rot_left.onclick = function () {
    clearInterval(time)
    // i = i==0?2:i-1
    startPoint()
    if (i == 0) {
        i = 2
    } else {
        i = i - 1
    }
    lastPoint()
    changeImg()
    changeWord()
    start()
}
// 点击左边
rot_right.onclick = function () {
    clearInterval(time)
    startPoint()
    // i = i==2?0:i+1
    if (i == 2) {
        i = 0
    } else {
        i = i + 1
    }
    changeImg()
    lastPoint()
    changeWord()
    start()
}

// for (let a = 0; a < rot_li.length; a++) {
//     rot_li(a).onclick = function () {
//         clearInterval(time)
//         startPoint()
//         i = a
//         changeImg()
//         lastPoint()
//         start()
//     }
// }

$('.rot_ul>li').click(function () {
    // 获取li
    clearInterval(time)
    // 清除计时器
    $(this).siblings().css('background', '#fff')
    $(this).css('background', 'rgb(209, 15, 15)')
    // 将兄弟节点的颜色变为开始的颜色，点击的那个li颜色变为红色
    i = $(this).index()
    // 将点击li的索引给 全局的 i
    changeImg()
    // 改变后边的背景图片
    changeWord()
    start()
})


// 改变背景图片的路径
function changeImg() {
    rotation.style.backgroundImage = img[i]
}
// 开始时小球的颜色
function startPoint() {
    rot_li[i].style.background = '#fff'
}
// 变化时小球的颜色
function lastPoint() {
    rot_li[i].style.background = 'rgb(209, 15, 15)'
}
// 不同图片对应不同位置使用不同动画效果
function changeWord() {
    if (i == 0) {
        rot_top.className = ' rot_top animated fadeInDown'
        rot_bottom.className = ' rot_bottom animated fadeInUp'
    }
    if (i == 1) {
        rot_top.className = ' rot_top animated fadeInLeft'
        rot_bottom.className = ' rot_bottom animated fadeInRight'
    }
    if (i == 2) {
        rot_top.className = ' rot_top animated rotateInDownLeft'
        rot_bottom.className = ' rot_bottom animated rotateInDownRight'
    }
    // 每做完一次动画，把动画清除掉，才能做下一次动画
    setTimeout(() => {
        rot_top.className = 'rot_top'
        rot_bottom.className = 'rot_bottom'
    }, 1000);
}
// 企业动态
var b = 0
time_ani = setInterval(function () {
    b = b == 3 ? 0 : b + 1
    // 让全部li 消失，特定li出现
    $('.anim_ul').children().css({
        'display': 'none'
    })
    $('.anim_ul>li').eq(b).css({
        'display': 'block'
    })
    //写滑动的特效
    $('.anim_ul').css({
        'transform': ' translateX(-100%)',
        'visibility': 'visible'
    })
    $('.anim_img').css({
        'transform': ' translateX(150%)',
        'visibility': 'visible'
    })
    // 定时消失
    setTimeout(() => {
        $('.anim_ul').css({
            'visibility': 'hidden',
        })
        $('.anim_img').css({
            'visibility': 'hidden',
        })
    }, 1000);
    // 定时拉回原点
    setTimeout(() => {
        $('.anim_ul').css({
            'transform': '',
        })
        $('.anim_img').css({
            'transform': '',
        })
    }, 2000);
}, 3000)


// 点击右边
$('.ani_bu_right').click(function () {
    // 清除计时器，停止轮播
    clearInterval(time_ani)
    // 让ul消失
    $('.anim_ul').css({
        'visibility': 'hidden',
    })
    $('.anim_img').css({
        'visibility': 'hidden',
    })
    // 把ul拉回起始位置
    setTimeout(() => {
            $('.anim_ul').css({
                'transform': '',
            })
            $('.anim_img').css({
                'transform': '',
            })
    }, 1000);
    // 换内容出现
    setTimeout(() => {
        b = b == 0 ? 3 : b - 1
        // 让全部li 消失，特定li出现
        $('.anim_ul').children().css({
            'display': 'none'
        })
        $('.anim_ul>li').eq(b).css({
            'display': 'block'
        })
        //写滑动的特效
        $('.anim_ul').css({
            'transform': ' translateX(-100%)',
            'visibility': 'visible'
        })
        $('.anim_img').css({
            'transform': ' translateX(150%)',
            'visibility': 'visible'
        })
    }, 2000);
})

// 点击左边
$('.ani_bu_left').click(function () {
    clearInterval(time_ani)

    // 让全部li 消失，特定li出现
    $('.anim_ul').children().css({
        'display': 'none'
    })
    $('.anim_ul>li').eq(b).css({
        'display': 'block'
    })
      // 让ul消失
      $('.anim_ul').css({
        'visibility': 'hidden',
    })
    $('.anim_img').css({
        'visibility': 'hidden',
    })
    // 把ul拉回起始位置
    setTimeout(() => {
            $('.anim_ul').css({
                'transform': '',
            })
            $('.anim_img').css({
                'transform': '',
            })
    }, 1000);
    // 换内容出现
    setTimeout(() => {
        b = b == 3 ? 0 : b + 1
        // 让全部li 消失，特定li出现
        $('.anim_ul').children().css({
            'display': 'none'
        })
        $('.anim_ul>li').eq(b).css({
            'display': 'block'
        })
        //写滑动的特效
        $('.anim_ul').css({
            'transform': ' translateX(-100%)',
            'visibility': 'visible'
        })
        $('.anim_img').css({
            'transform': ' translateX(150%)',
            'visibility': 'visible'
        })
    }, 2000);
})

// 客户反馈

// 正则表达，判断是否为空
var zz_name = /^[\s\S]*.*[^\s][\s\S]*$/
// 正则表达 ，   判断电话号码格式是否正确
var zz_phone = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
// 正则表达式 符合条件输出 true 
// 判断姓名框
$('.input_name').blur(function () {
    if (zz_name.test($('.input_name').val())) {
        $('.name_block').css({
            'display': 'none'
        })
    }
    else{
        $('.name_block').css({
            'display': 'block'
        })
    }
})

// 判断文本框
$('textarea').blur(function () {
    if (zz_name.test($('textarea').val())) {
        $('.text_block').css({
            'display': 'none'
        })
    }
    else{
        $('.text_block').css({
            'display': 'block'
        })
    }
})

// 判断电话框
$('.input_phone').blur(function () {
    // 先判断是否内容是否为空
    if (zz_name.test($('.input_phone').val())) {
        // 不为空判断电话号码是否正确
        if(zz_phone.test($('.input_phone').val())) {
            // 电话号码正确时不出现提示框
            $('.phone_block').css({
            'display': 'none'
        })
        }
        // 电话号码格式错误时，让一个span出现，另一个消失
        else{
            $('.phone_block').css({
                'display': 'block'
            })
            $('.none_o').css({
                'display': 'none'
            })
            $('.none_t').css({
                'display': 'inline-block'
            })
        }
    }
    // 为空的时候让一个span出现，另一个消失
    else{
        $('.phone_block').css({
            'display': 'block'
        })
        $('.none_t').css({
            'display': 'none'
        })
        $('.none_o').css({
            'display': 'inline-block'
        })
    }
})